<lv-group lvDirection="vertical" lvGutter="20px">
  <div>
    <h2>lvResizeMode: fit</h2>
    <lv-datatable [lvData]="data" #lvTable lvResize>
      <thead>
        <tr>
          <th lvCellKey="name">Name</th>
          <th lvCellKey="age">Age</th>
          <th lvCellKey="random">Random</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let item of lvTable.renderData">
          <tr>
            <td>
              <span lv-overflow>{{ item.name }} long long long name</span>
            </td>
            <td>{{ item.age }}</td>
            <td>{{ item.random }}</td>
          </tr>
        </ng-container>
      </tbody>
    </lv-datatable>
  </div>
  <div>
    <h2>lvResizeMode: expand</h2>
    <lv-datatable [lvData]="data" #lvTable lvResize lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
      <thead>
        <tr>
          <th lvCellKey="name">Name</th>
          <th lvCellKey="age">Age</th>
          <th lvCellKey="random">Random</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let item of lvTable.renderData">
          <tr>
            <td>
              <span lv-overflow>{{ item.name }} long long long name</span>
            </td>
            <td>{{ item.age }}</td>
            <td>{{ item.random }}</td>
          </tr>
        </ng-container>
      </tbody>
    </lv-datatable>
  </div>
  <div style="position: relative; width: 100%">
    <h2>lvResizeMode: expand; lvVirtualScroll: true</h2>
    <lv-datatable
      class="customer-table"
      [lvData]="data"
      #lvTable
      lvSelectionMode="multiple"
      [lvSelection]="selection"
      (lvSelectionChange)="selectionChange($event)"
      lvResize
      lvResizeMode="expand"
      lvVirtualScroll
      [lvScroll]="{ x: '100%', y: '100px' }"
    >
      <thead>
        <tr>
          <th
            lvResizable="false"
            lvShowCheckbox
            style="width: 40px"
            [lvRowsData]="lvTable.renderData"
            (lvCheckChange)="checkAllChange($event)"
          ></th>
          <ng-container *ngFor="let col of oColumns">
            <th *ngIf="!col.hidden" [lvCellKey]="col.key" [width]="col.width">
              <span lv-overflow>{{ col.label }}</span>
            </th>
          </ng-container>
          <!-- 配置不可拖动改变列宽度属性 -->
          <th lvResizable="false" style="width: 16px; padding: 0">
            <!-- 列过滤器 -->
            <div class="ui-table-col-setting" [class.ui-table-col-setting-active]="visible">
              <i
                lv-icon="lv-icon-col-setting"
                lvColorState
                lv-popover
                [lvPopoverHeader]="tableSettingTitleTpl"
                [lvPopoverContent]="tableSettingConTpl"
                lvPopoverTheme="light"
                lvPopoverTrigger="click"
                lvPopoverPosition="bottomRight"
                lvPopoverShowArrow="false"
                lvPopoverClosable
                lvPopoverClassName="ui-col-setting-panel"
                [lvPopoverBeforeOpen]="beforeOpen"
                [lvPopoverAfterClose]="afterOpen"
              ></i>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- <ng-container *ngFor="let item of lvTable.renderData"> -->
        <ng-template lv-virtual-scroll let-item>
          <tr>
            <td lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled" (lvCheckChange)="checkOneChange($event)"></td>
            <ng-container *ngFor="let col of oColumns">
              <td *ngIf="!col.hidden" [lvRowData]="item">
                <span lv-overflow>{{ item[col.key] }}</span>
              </td>
            </ng-container>
            <td><!-- 列过滤器占位 --></td>
          </tr>
        </ng-template>
        <!-- </ng-container> -->
      </tbody>
    </lv-datatable>
  </div>
</lv-group>

<ng-template #tableSettingTitleTpl>
  <h2 class="ui-table-setting-title">{{ 'tableSetting' | i18n }}</h2>
</ng-template>

<ng-template #tableSettingConTpl>
  <lv-group class="ui-table-setting-content" lvDirection="vertical" lvGutter="24px">
    <lv-group lvDirection="vertical" lvGutter="4px">
      <span class="ui-table-setting-header">{{ 'columns' | i18n }}</span>
      <lv-checkbox-group [(ngModel)]="selected" (ngModelChange)="onChangeColumns($event)">
        <lv-group cdkDropList lvDirection="vertical" lvGutter="4px" (cdkDropListDropped)="drop($event)">
          <div *ngFor="let col of oColumns" class="ui-table-setting-item" cdkDrag>
            <div class="lv-drag-placeholder" *cdkDragPlaceholder></div>
            <lv-group lvGutter="8px">
              <lv-checkbox [lvValue]="col.label" [lvDisabled]="col.disabled"></lv-checkbox>
              <span>{{ col.label }}</span>
            </lv-group>
            <i lv-icon="lv-icon-col-drag"></i>
          </div>
        </lv-group>
      </lv-checkbox-group>
    </lv-group>
  </lv-group>
</ng-template>
